import React, { Component } from 'react';
import { Link } from 'react-router'

export class NavLink extends Component{
    render() {
        return (
            <Link {...this.props} activeClassName="active"/>
        );
    }
}
export class NavList extends Component{
    render(){
        var navs = this.props.data.map(function (nav) {
            return (
                <li key={nav.id}><NavLink to={nav.link}>{nav.name}</NavLink></li>
            );
        });
        return(
            <div className="nav">
                <ul>
                    {navs}
                </ul>
            </div>
        );
    }
}

export default class Nav extends Component {
    loadNav() {
        var req = new Request("http://localhost:33333/nav/navlist", {method: 'POST', cache: 'reload',mode: 'cors'});
        var req2 = new Request("/api/userNav.json", {method: 'GET', cache: 'reload'});
        fetch(req2).then(function(rsp){
            return rsp.json();
        }).then(function(res){
            console.log(res.data)
            this.setState({data:res.data});
        }.bind(this));
    };
    constructor(props, context) {
        super(props, context);
        this.state = {
            data:[]
        };
    };
    componentDidMount(){
        this.loadNav();
    };
    render() {
        return (
            <NavList data={this.state.data} />
        );
    }
}
